<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻页面</title>
    <style>
        .news-container{
            width: 800px;
            margin: 0 auto;
        }
        .news-item{
            border: 1px solid #ddd;
            padding: 20px;
            margin-bottom: 20px;
        }
        .news-item h3{
            margin-top: 0;
        }
    </style>
</head>
<body>
    <h2>新闻头条</h2>
    <div class="news-container">
        <div class="news-item">
            <h3>重大科技突破:新型能源技术引领未来</h3>
            <p>近日，科学家们在能源领域取得了一项重大突破......</p>
            <p>发布时间:2023年10月15日</p>
        </div>
        <div class="news-item">
            <h3>全球经济展望:复苏中的挑战与机遇</h3>
            <p>最新的经济报告显示，全球经济正在处于复苏阶段......</p>
            <p>发布时间:2023年10月16日</p>
        </div>
    </div>
    <script>
        const newsItems = document.querySelectorAll('.news-item');
        newsItems.forEach(newsItems => {
            newsItems.addEventListener('click',function(){
                const content = this.querySelector('p');
                if(content.style.display === 'none'){
                    content.style.display = 'block';
                }else{
                    content.style.display = 'none';
                }
            });
        });
    </script>
</body>
</html>